<template>
  <div class="app-container">
    <div class="mod-menu">
      <div class="filter-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-button class="filter-item" icon="el-icon-plus"  @click="addOrUpdateHandle()" type="primary">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="dataList" row-key="id" v-loading="listLoading" element-loading-text="数据正在加载" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="name" align="center" width="200" label="名称"></el-table-column>
        <el-table-column prop="parentName" align="center" label="上级菜单"></el-table-column>
        <el-table-column prop="type" align="center" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="scope.row.type === 1" size="small" type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="uri" align="center" :show-overflow-tooltip="true" label="菜单URL"></el-table-column>
        <el-table-column prop="displayOrder" header-align="center" align="center" label="排序号"></el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </div>
</template>

<script>
  import AddOrUpdate from './menu-add-or-update'
  import { getMenuList,deleteResource} from '@/api/auth/resource'
  export default {
    data () {
      return {
        dataList: [],
        listLoading:false,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    components: {
       AddOrUpdate
    },
    created () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.listLoading = true
        getMenuList().then(response => {
          this.dataList = response.data
          this.listLoading = false
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定进行[删除]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {}
          data.id = id
          deleteResource(data).then(response => {
            this.$notify({
              message: '删除成功',
              type: 'success',
              duration: 1500,
            })
            this.getDataList();
          })
        }).catch(() => {})
      }
    }
  }
</script>
